﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewmodel="clr-namespace:Omnia.ViewModels;assembly=Omnia.ViewModels"
    xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" xmlns:edc="clr-namespace:Microsoft.Expression.Controls;assembly=Microsoft.Expression.Drawing" 
    xmlns:es="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing" 
    xmlns:Converters="clr-namespace:Omnia.Converters;assembly=Omnia.Converters" 
    x:Class="Omnia.Wallet.Views.CategoryTransactionView"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"
    shell:SystemTray.IsVisible="False">

	<phone:PhoneApplicationPage.Resources>
        <Converters:EnumTranslateConverter x:Key="EnumTranslateConverter"/>
	</phone:PhoneApplicationPage.Resources>

    <Grid x:Name="LayoutRoot">
    	<Grid.Background>
    		<ImageBrush Stretch="{Binding GlobalSettings.BackgroundImageStretch}" ImageSource="{Binding BackgroundImageSource, Mode=OneWay}"/>
    	</Grid.Background>
        <Grid.DataContext>
            <viewmodel:CategoryTransactionViewModel/>
        </Grid.DataContext>
        <Grid.RowDefinitions>
        	<RowDefinition Height="Auto"/>
        	<RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="{StaticResource IDS_PAGE_TITLE}" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="{Binding CurrentShowItem.Name}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <ListBox ItemsSource="{Binding FetchedTransactionCollection}">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListBoxItem">
                                    <StackPanel Margin="12,12,0,12">
                                    	<VisualStateManager.CustomVisualStateManager>
                                    		<ec:ExtendedVisualStateManager/>
                                    	</VisualStateManager.CustomVisualStateManager>
                                    	<VisualStateManager.VisualStateGroups>
                                    		<VisualStateGroup x:Name="SelectionStates" ec:ExtendedVisualStateManager.UseFluidLayout="True">
                                    			<VisualStateGroup.Transitions>
                                    				<VisualTransition GeneratedDuration="0:0:0.2">
                                    					<VisualTransition.GeneratedEasingFunction>
                                    						<BackEase EasingMode="EaseOut"/>
                                    					</VisualTransition.GeneratedEasingFunction>
                                    				</VisualTransition>
                                    			</VisualStateGroup.Transitions>
                                    			<VisualState x:Name="Unselected"/>
                                    			<VisualState x:Name="Selected">
                                    				<Storyboard>
                                    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" 
                                                                                       Storyboard.TargetName="detailPanel">
                                    						<DiscreteObjectKeyFrame KeyTime="0">
                                    							<DiscreteObjectKeyFrame.Value>
                                    								<Visibility>Visible</Visibility>
                                    							</DiscreteObjectKeyFrame.Value>
                                    						</DiscreteObjectKeyFrame>
                                    					</ObjectAnimationUsingKeyFrames>
                                    				</Storyboard>
                                    			</VisualState>
                                    			<VisualState x:Name="SelectedUnfocused"/>
                                    		</VisualStateGroup>
                                    	</VisualStateManager.VisualStateGroups>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                            	<ColumnDefinition/>
                                            	<ColumnDefinition Width="auto"/>
                                            </Grid.ColumnDefinitions>
                                            <Grid Width="2" HorizontalAlignment="Left" Background="{StaticResource PhoneAccentBrush}"/>
                                            <TextBlock Style="{StaticResource PhoneTextTitle3Style}" Text="{Binding Time,StringFormat=\{0:M\}}" />
                                            <TextBlock Style="{StaticResource PhoneTextTitle3Style}" Grid.Column="1" Text="{Binding Amount}"/>
                                        </Grid>
                                        <StackPanel Visibility="Collapsed" x:Name="detailPanel" Margin="0,0,12,0">
                                            <es:RegularPolygon Fill="{StaticResource PhoneSubtleBrush}" 
                                                               Height="16" 
                                                               InnerRadius="1" 
                                                               PointCount="3" 
                                                               Stretch="Fill" 
                                                               StrokeThickness="0" 
                                                               Width="16" 
                                                               HorizontalAlignment="Right" 
                                                               Margin="0,0,20,0"/>
                                            <Border Background="{StaticResource PhoneSubtleBrush}" Padding="0,6">
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                    	<ColumnDefinition/>
                                                    	<ColumnDefinition Width="auto"/>
                                                    </Grid.ColumnDefinitions>
                                                    <Grid.RowDefinitions>
                                                    	<RowDefinition Height="auto"/>
                                                    	<RowDefinition Height="auto"/>
                                                    </Grid.RowDefinitions>
                                                    <TextBlock Style="{StaticResource PhoneTextTitle3Style}" Text="{Binding Place}" />
                                                    <TextBlock Style="{StaticResource PhoneTextTitle3Style}" 
                                                               Text="{Binding Paymentway, Converter={StaticResource EnumTranslateConverter}}"
                                                               Grid.Column="1"/>
                                                    <TextBlock Style="{StaticResource PhoneTextNormalStyle}" 
                                                               Text="{Binding Remark}" 
                                                               Grid.Row="1" 
                                                               Grid.ColumnSpan="2" 
                                                               Foreground="{StaticResource PhoneChromeBrush}" />
                                                </Grid>
                                            </Border>

                                        </StackPanel>
                                    </StackPanel>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>
